<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #maskBoard {
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
      border: 1px solid #000;
    }
    #img {
      width: 100%;
      height: 100%;
      /* object-fit: cover; */
    }
    #mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }

    #box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      /* 使用 will-change 告知浏览器元素即将发生 transform 变化 */
      will-change: transform;
      /* 触发 GPU 加速，创建新的合成层 */
      transform: translateZ(0);
      animation: move 2s infinite alternate;
    }

    @keyframes move {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(200px);
        opacity: 0;
      }
    }
  </style>
  <body>
    <input type="file" id="inputFile" />
    <br />

    <div style="display: flex; justify-content: space-around" id="good">
      <div id="maskBoard">
        <img
          src=""
          id="img"
        />
        <div id="mask"></div>
      </div>

      <canvas id="canvas" style="width: 500px; height: 300px"></canvas>

      <img src="" alt="" id="imgCutResult" />
    </div>
    <button onclick="changeBoxSize()">点击</button>
    <button onclick="browserDead()">卡死</button>
    <div id="box"></div>

    <script>
      const inputFile = document.getElementById('inputFile')
      const img = document.getElementById('img')
      const mask = document.getElementById('mask')
      const maskBoard = document.getElementById('maskBoard')
      inputFile.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader()
        // 异步事件，靠事件驱动
        reader.onload = (e) => {
          console.log(e.target.result)
          img.src = e.target.result
        }
        reader.readAsDataURL(file)
      })

      maskBoard.onmouseenter = (e) => {
        mask.style.opacity = 0.6
        maskBoard.onmousedown = mouseDownCut
        maskBoard.onmouseup = mouseUpCut
      }

      maskBoard.onmouseleave = (e) => {
        mask.style.opacity = 0
        maskBoard.onmousedown = null
        maskBoard.onmouseup = null
      }

      let starX
      let starY
      // 鼠标移入图片并按下鼠标时，开始裁剪
      function mouseDownCut(e) {
        console.log('鼠标点击开始裁剪', e.offsetX, e.offsetY)
        starX = e.offsetX
        starY = e.offsetY
      }

      let endX
      let endY
      // 鼠标松开点击时，结束裁剪
      function mouseUpCut(e) {
        console.log('鼠标松开结束裁剪', e.offsetX, e.offsetY)
        endX = e.offsetX
        endY = e.offsetY
        drawCanvas()
      }

      // 画布作画

      function drawCanvas() {
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')

        ctx.clearRect(0, 0, canvas.width, canvas.height)

        console.log('从' + starX, starY + '开始画')
        console.log('画宽' + (endX - starX) + '高' + (endY - starY))

        console.dir(img)
        ctx.drawImage(
          img,
          starX,
          starY,
          endX - starX,
          endY - starY,
          0,
          0,
          endX - starX,
          endY - starY
        )

        canvas.toBlob((blob) => {
          console.log('canvas转blob', blob)
          const file = new File([blob], 'cut.png', { type: 'image/png' })
          console.log(file)

          // 读取文件
          const reader = new FileReader()
          reader.onload = (e) => {
            console.log('读取文件', e.target.result)
            imgCutResult.src = e.target.result
          }
          reader.readAsDataURL(file)
        })
      }

      let size = 'normal'
      function changeBoxSize() {
        const box = document.getElementById('box')

        box.style.width = size == 'normal' ? '100px' : '200px'
        box.style.height = size == 'normal' ? '100px' : '200px'

        size = size == 'normal' ? 'big' : 'normal'
      }

      function browserDead() {
        let start = Date.now()

        while (Date.now() - start <= 3000) {}
      }
    </script>
  </body>
</html>
